import { Button, Col, Form, Modal, Radio, Row, message } from 'antd';

import { useEffect, useRef, useState } from 'react';

import styles from './index.modules.less';

import AvaCard from '@/components/AvaCard';
import BlueCard from '@/components/BlueCard';
import BlueTabs from '@/components/BlueTabs';
import Medicine from '@/components/Modal/Medicine';
import PadHeader from '@/components/PadHeader';
import { DEFAULT_BTN_STYLE, PRISONERS_LIST } from '@/consts';
import { CACHE_KEY, DATA_FORMAT, EVENT_TYPE, emitEvent, setCacheByKey } from '@/utils';
import { fakerZH_CN } from '@faker-js/faker';
import dayjs from 'dayjs';
import { delay } from 'lodash';
import SignaturePad from 'signature_pad';
import { io } from 'socket.io-client';

const avatar = require('../../assets/image/头像.png');
const warnImg = require('../../assets/image/warn.png');

export default () => {
  const [isCameraing, setIsCameraing] = useState(false);
  const [camerTitle, setCamerTitle] = useState<any>(null);
  const [cameraStatus, setCamerStatus] = useState(0);
  const [currentPrisoner, setCurrentPrisoner] = useState<any>(null);
  const [interTime, setInterTime] = useState(600);
  const [alarmValues, setAlarmValues] = useState({
    type: '打架斗殴',
    level: 1,
  });
  const [medicineOpen, setMedicineOpen] = useState(false);

  const currentBc = useRef<any>(null);
  const currentInterTime = useRef<any>(null);
  const currentSocket = useRef<any>(null);

  const beginInterTime = (callback: any) => {
    setInterTime(120);
    let inter = setInterval(() => {
      setInterTime((interTime) => {
        if (interTime === 0) {
          clearInterval(inter);
          callback();
        }
        return interTime - 1;
      });
    }, 1000);
    currentInterTime.current = inter;
  };

  const handleQianming = () => {
    const canvas = document.querySelector('#qianming');

    if (canvas) {
      console.log('😈canvas', canvas);
      // new SignaturePad(canvas, {
      //   minWidth: 1,
      //   maxWidth: 2,
      //   penColor: 'rgb(66, 133, 244)',
      // });

      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      console.log('[ratio]', ratio);
      console.log('[canvas.offsetWidth]', canvas.offsetWidth);
      canvas.getContext('2d').scale(0.6, 0.8);
      new SignaturePad(canvas, {
        // backgroundColor: "rgba(236,151,66,0.09)"
        // width: window.innerWidth + ratio,
        minWidth: 1,
        maxWidth: 2,
        penColor: 'rgb(66, 133, 244)',
      });

      // new SmoothSignature(canvas, {
      //   width: 700,
      //   height: 250,
      //   scale: 2,
      //   minWidth: 4,
      //   maxWidth: 10,
      //   color: '#1890ff',
      //   bgColor: '#efefef',
      // });
      setCamerTitle('签名确认');
      setCamerStatus(10);
    }
  };

  const beginCamera = async ({ wait = 3000, callback }: any) => {
    setIsCameraing(true);

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      const video = document.querySelector('#video');
      if ('srcObject' in video) {
        video.srcObject = stream;
      } else {
        // 在支持srcObject的浏览器上，不再支持使用这种方式
        video.src = URL.createObjectURL(stream);
      }
      await video.play();
    } catch (error) {
      console.error('Error accessing camera:', error);
    }
    if (callback instanceof Function)
      await delay(() => {
        callback();
      }, wait);
  };

  const saySth = (str: string) => {
    const synth = window.speechSynthesis;
    const utterThis = new SpeechSynthesisUtterance(str);
    utterThis.lang = 'zh-hans-cn';
    console.log('[utterThis]', utterThis);
    synth.cancel();
    synth.speak(utterThis);
  };

  const handleAutoRollCall = ({ crminals }) => {
    // console.log(audioRef.current);
    // audioRef.current.play();

    saySth('现在开始点名');

    let index = 0;
    const lasttIndex = crminals.length - 1;
    setTimeout(async () => {
      const inter = setInterval(async () => {
        const cc = crminals[index];
        setCamerTitle('点名中');
        saySth(cc);
        await beginCamera({
          wait: 0,
        });
        if (index === lasttIndex) {
          delay(() => {
            message.error(`${cc}验证不通过，签到失败`);
          }, 500);
        } else {
          delay(() => {
            message.success(`${cc}签到成功`);
          }, 500);
        }

        index++;
        if (index === crminals.length) {
          clearInterval(inter);
          setTimeout(() => {
            setIsCameraing(false);
            saySth(`点名完毕，应到${crminals.length}人，实到${crminals.length - 1}人，缺1人；`);

            const clientOffset2 = `${currentSocket.current.id}-${1}`;
            currentSocket.current.emit(
              EVENT_TYPE.ADD_TASK,
              {
                title: '点名异常',
                time: dayjs().format(DATA_FORMAT),
                content: 'A区201室 嫌疑人D 点名缺席',
              },
              clientOffset2,
            );
          }, 2000);
        }
      }, 3000);
    }, 1500);
  };

  const handleConsultationBegin = ({ name }) => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    const prisoner = name || fakerZH_CN.person.fullName();

    beginCamera({
      callback: () => {
        message.success(`${prisoner}识别成功`);
        setCamerTitle('远程问诊中...');
        setCamerStatus(4);
        beginInterTime(() => {
          setCamerStatus(0);
          setIsCameraing(false);
        });
      },
    });
  };

  const handleOutBegin = (data) => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    const prisoner = data.name || fakerZH_CN.person.fullName();

    beginCamera({
      callback: () => {
        message.success(`${prisoner}识别成功`);
        setCamerStatus(0);
        setIsCameraing(false);

        setCacheByKey(CACHE_KEY.MEETING_LIST, (item) => item.prisoner === data.name, {
          status: '出房中',
        });

        setCacheByKey(CACHE_KEY.PRISION_LIST, (item) => item.name === data.name, {
          status: '出房中',
        });
      },
    });
  };

  const handleInBegin = (data) => {
    const content = `注意，请${data.name}前来认证确认带入`;
    console.log('[content]', content);
    saySth(content);
    setCurrentPrisoner(data.name);
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    const prisoner = data.name || fakerZH_CN.person.fullName();

    beginCamera({
      callback: () => {
        message.success(`${prisoner}识别成功`);
        setCamerStatus(0);
        setIsCameraing(false);

        setCacheByKey(CACHE_KEY.MEETING_LIST, (item) => item.prisoner === data.name, {
          status: '在押',
        });

        setCacheByKey(CACHE_KEY.PRISION_LIST, (item) => item.name === data.name, {
          status: '在押',
        });
      },
    });
  };

  const handleConsultation = (data) => {
    const content = `注意，医生发起远程问诊，请${data.name}进行自述`;
    saySth(content);
    setCurrentPrisoner(data.name);

    Modal.confirm({
      title: '远程问诊',
      content,
      okText: '确认',
      cancelText: '取消',
      onOk: () =>
        handleConsultationBegin({
          name: data.name,
        }),
    });
  };

  const handleMedicineCall = (data) => {
    console.log('handleMedicineCall', data);
    const content = `注意，请${data.name}进行服药`;
    saySth(content);
    setCurrentPrisoner(data.name);

    Modal.confirm({
      title: '服药确认',
      content,
      okText: '确认',
      cancelText: '取消',
      onOk: () =>
        handleConfirmMedicine({
          name: data.name,
        }),
    });
  };

  const handleOut = (data) => {
    const content = `注意，请${data.name}前来出口认证带出`;
    saySth(content);
    setCurrentPrisoner(data.name);

    Modal.confirm({
      title: '认证带出',
      content,
      okText: '确认',
      cancelText: '取消',
      onOk: () => handleOutBegin(data),
    });
  };

  const handleMessage = (data: { type: any; data: any }) => {
    console.log('😈data', data);
    switch (data?.type) {
      case EVENT_TYPE.BEGIN_AUTO_ROLL_CALL:
        handleAutoRollCall(data);
        break;
      case EVENT_TYPE.RE_CONSULTATION:
        handleConsultation(data);
        break;
      case EVENT_TYPE.BEGIN_MEDICINE_CALL:
        handleMedicineCall(data);
        break;
      case EVENT_TYPE.BEGIN_OUT_REGIS:
        handleOut(data);
        break;
      case EVENT_TYPE.BEGIN_IN_REGIS:
        handleInBegin(data);
        break;
    }
  };

  const handleEmergentReport = () => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    beginCamera({
      callback: () => {
        const prisoner = PRISONERS_LIST[0].name;
        setCurrentPrisoner(prisoner);

        message.success(`${prisoner}识别成功`);
        setCamerTitle('录制告警视频');
        setCamerStatus(1);
        beginInterTime(() => {
          setCamerStatus(0);
          setIsCameraing(false);
        });
      },
    });
  };

  const handleNormalReport = async () => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    beginCamera({
      callback: () => {
        const prisoner = PRISONERS_LIST[0].name;
        setCurrentPrisoner(prisoner);

        setCamerTitle('开始病情视频录制');
        setCamerStatus(2);
        beginInterTime(() => {
          setCamerStatus(0);
          setIsCameraing(false);
        });
      },
    });
  };

  const handleAlarm = async () => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    beginCamera({
      callback: () => {
        const prisoner = PRISONERS_LIST[0].name;
        setCurrentPrisoner(prisoner);

        setCamerTitle('选择告警类型');
        setCamerStatus(11);
        beginInterTime(() => {
          setCamerStatus(0);
          setIsCameraing(false);
        });
      },
    });
  };

  const handleConfirmMedicine = ({ name = '' }) => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    beginCamera({
      callback: () => {
        const prisoner = name || PRISONERS_LIST[0]?.name;

        message.success(`${prisoner}识别成功`);
        setCamerTitle('开始服药');
        setCamerStatus(3);
      },
    });
  };

  const initBroadCast = () => {
    // const bc = new BroadcastChannel('inspector_prison');
    // currentBc.current = bc;

    // if (bc)
    //   bc.onmessage = function (ev) {
    //     console.log('收到消息啦', ev.data);
    //     handleMessage(ev.data);
    //   };

    const socket = io('wss://zkapi.lvseguanjia.cn:16064', {
      ackTimeout: 10000,
      retries: 3,
      auth: {
        serverOffset: 0,
      },
      port: 3000,
    });
    console.log('😈初始化socket');
    currentSocket.current = socket;
    socket.on(EVENT_TYPE.BEGIN_AUTO_ROLL_CALL, handleMessage);
    socket.on(EVENT_TYPE.BEGIN_MEDICINE_CALL, handleMessage);
    socket.on(EVENT_TYPE.BEGIN_IN_REGIS, handleMessage);
    socket.on(EVENT_TYPE.BEGIN_OUT_REGIS, handleMessage);
    socket.on(EVENT_TYPE.RE_CONSULTATION, handleMessage);
  };

  const handleExitCamera = () => {
    // 紧急报病
    if (cameraStatus === 1) {
      const clientOffset = `${currentSocket.current.id}-${0}`;
      currentSocket.current.emit(
        EVENT_TYPE.PC_EMERGEN_REPORT,
        {
          prisoner: currentPrisoner,
        },
        clientOffset,
      );

      currentSocket.current.emit(
        EVENT_TYPE.EMERGEN_REPORT,
        {
          prisoner: currentPrisoner,
        },
        clientOffset,
      );

      currentSocket.current.emit(
        EVENT_TYPE.ADD_DOCTOR_RECORD,
        {
          medicineStatus: '未服药',
          prisoner: currentPrisoner,
          time: dayjs().format(DATA_FORMAT),
        },
        clientOffset,
      );

      // emitEvent(EVENT_TYPE.PC_EMERGEN_REPORT, {
      //   prisoner: currentPrisoner,
      // });

      // emitEvent(EVENT_TYPE.EMERGEN_REPORT, {
      //   prisoner: currentPrisoner,
      // });

      // emitEvent(EVENT_TYPE.ADD_DOCTOR_RECORD, {
      //   medicineStatus: '未服药',
      //   prisoner: currentPrisoner,
      //   time: dayjs().format(DATA_FORMAT),
      // });
      message.success('报病成功');
    }

    // 普通报病
    if (cameraStatus === 2) {
      // TODO 增加标签
      // TODO admin 增加报病记录，监视记录
      // const clientOffset2 = `${currentSocket.current.id}-${1}`;
      // currentSocket.current.emit(
      //   EVENT_TYPE.EMERGEN_REPORT,
      //   {
      //     type: EVENT_TYPE.EMERGEN_REPORT,
      //     prisoner: currentPrisoner,
      //   },
      //   clientOffset2,
      // );
      const clientOffset = `${currentSocket.current.id}-${0}`;
      console.log('[普通报病]', currentSocket.current);
      currentSocket.current.emit(
        EVENT_TYPE.PC_EMERGEN_REPORT,
        {
          prisoner: currentPrisoner,
        },
        clientOffset,
      );

      const clientOffset2 = `${currentSocket.current.id}-${1}`;
      currentSocket.current.emit(
        EVENT_TYPE.ADD_TASK,
        {
          title: '在线报病 ',
          time: dayjs().format(DATA_FORMAT),
          content: 'A区201 监室 嫌疑人A 在线报病，请处理',
        },
        clientOffset2,
      );
      // const clientOffset3 = `${currentSocket.current.id}-${2}`;
      // currentSocket.current.emit(
      //   EVENT_TYPE.ADD_DOCTOR_RECORD,
      //   {
      //     medicineStatus: '未服药',
      //     prisoner: currentPrisoner,
      //     time: dayjs().format(DATA_FORMAT),
      //   },
      //   clientOffset3,
      // );
      message.success('报病成功');
    }

    // 服药成功
    if (cameraStatus === 10) {
      // TODO 增加标签
      // TODO admin 增加报病记录，监视记录
      message.success('服药完成');
    }

    // 问诊结束
    if (cameraStatus === 4) {
      // TODO 增加标签
      // TODO admin 增加报病记录，监视记录
      message.success('问诊完成');
    }

    // 紧急报警
    if (cameraStatus === 5) {
      message.success('报警完毕');
      emitEvent(EVENT_TYPE.PC_ALARAM, { prisoner: currentPrisoner, ...alarmValues });
    }

    setCamerStatus(0);
    setIsCameraing(false);
    clearInterval(currentInterTime.current);
  };

  useEffect(() => {
    initBroadCast();

    // setIsCameraing(true);
    // setTimeout(() => {
    //   handleQianming();
    // });
  }, []);

  const showCamerea = cameraStatus !== 10 && cameraStatus !== 11;
  return (
    <div className={styles.container}>
      <PadHeader extra={'（内屏）'}></PadHeader>

      <Medicine
        open={medicineOpen}
        setOpen={setMedicineOpen}
        onOk={() => {
          handleNormalReport();
          setMedicineOpen(false);
        }}
      ></Medicine>

      {isCameraing && (
        <div className={styles.camerContainer}>
          {camerTitle && <div className={styles.camerTitle}>{camerTitle}</div>}
          {(cameraStatus === 1 || cameraStatus === 2 || cameraStatus === 4) && (
            <div style={{ fontSize: 18 }}>剩余时间：{interTime}秒</div>
          )}

          {showCamerea && (
            <div
              id="camera"
              className={styles.camera}
              style={{ width: '55vh', height: isCameraing ? '55vh' : 0 }}
            >
              <video
                className={styles.camera}
                id="video"
                autoPlay
                style={{ width: '55vh', height: isCameraing ? '55vh' : 0 }}
              ></video>
            </div>
          )}

          {cameraStatus === 10 && (
            <div style={{ width: 700 }}>
              <h5>姓名：嫌疑人B</h5>
              <h5>诊断：扁桃腺化脓</h5>
              <h5>药剂：头孢呋辛酯片 1片</h5>
              <h5>主治医生：医生A</h5>
            </div>
          )}

          {/* <SignaturePad
            style={{
              marginTop: showCamerea ? -20 : 0,
              width: showCamerea ? 0 : '800',
              height: showCamerea ? 0 : '500',
            }}
            clearButton="true"
          /> */}

          <div style={{ background: '#FFF' }}>
            <canvas
              id="qianming"
              style={{
                marginTop: showCamerea ? -20 : 0,
                width: showCamerea ? 0 : '500px',
                height: showCamerea ? 0 : '200px',
              }}
            ></canvas>
          </div>

          {cameraStatus === 11 && (
            <Form
              initialValues={alarmValues}
              onValuesChange={(_, vals) => {
                console.log('[vals]', vals);
                setAlarmValues(vals);
              }}
            >
              <Form.Item name={'type'} label="告警类型">
                <Radio.Group>
                  <Radio value={'打架斗殴'}>打架斗殴</Radio>
                  <Radio value={'紧急'}>紧急</Radio>
                  <Radio value={'周界'}>周界</Radio>
                  <Radio value={'监室'}>监室</Radio>
                  <Radio value={'异动告警'}>异动告警</Radio>
                </Radio.Group>
              </Form.Item>

              <Form.Item name={'level'} label="告警级别">
                <Radio.Group>
                  <Radio value={1}>1级</Radio>
                  <Radio value={2}>2级</Radio>
                  <Radio value={3}>3级</Radio>
                </Radio.Group>
              </Form.Item>
            </Form>
          )}
          {cameraStatus === 11 && (
            <div>
              <Button
                onClick={() => {
                  setCamerStatus(5);
                  setCamerTitle('开始病情视频录制');
                }}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                下一步
              </Button>
            </div>
          )}
          {cameraStatus === 5 && (
            <div>
              <Button
                onClick={handleExitCamera}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                确认告警
              </Button>
            </div>
          )}
          {(cameraStatus === 1 || cameraStatus === 2) && (
            <div>
              <Button
                onClick={handleExitCamera}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                确认报病
              </Button>
            </div>
          )}
          {cameraStatus === 3 && (
            <div>
              <Button
                onClick={handleQianming}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                下一步
              </Button>
            </div>
          )}
          {cameraStatus === 10 && (
            <div>
              <Button
                onClick={handleExitCamera}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                确认
              </Button>
            </div>
          )}
          {cameraStatus === 4 && (
            <div>
              <Button
                onClick={handleExitCamera}
                size="large"
                type="primary"
                style={DEFAULT_BTN_STYLE}
              >
                结束问诊
              </Button>
            </div>
          )}
        </div>
      )}

      {!isCameraing && (
        <Row className="w100 h90" gutter={[30, 30]}>
          <Col span={6}>
            <Row gutter={[20, 20]} className="h90">
              <AvaCard title="主管民警" name="民警A"></AvaCard>
              <AvaCard title="协管民警" name="民警B"></AvaCard>
            </Row>
          </Col>
          <Col span={18} className="h100">
            <BlueCard
              style={{ padding: 50 }}
              className={'h100'}
              content={
                <BlueTabs
                  tabContent={
                    <Row className="h100 " gutter={[50, 30]}>
                      {/* <Col className="flex-center" span={6} onClick={handleAlarm}>
                        <div className="iconItem">
                          <svg
                            t="1712300947352"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="5593"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M192 832a32 32 0 0 0 0 64h640a32 32 0 0 0 0-64H192z m0-64h640a96 96 0 0 1 0 192H192a96 96 0 0 1 0-192z"
                              fill="#d81e06"
                              p-id="5594"
                            ></path>
                            <path
                              d="M816 208m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
                              fill="#d81e06"
                              p-id="5595"
                            ></path>
                            <path
                              d="M208 208m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
                              fill="#d81e06"
                              p-id="5596"
                            ></path>
                            <path
                              d="M480 608a32 32 0 0 1 64 0v160a32 32 0 0 1-64 0v-160z"
                              fill="#d81e06"
                              p-id="5597"
                            ></path>
                            <path
                              d="M512 640a112 112 0 1 1 0-224 112 112 0 0 1 0 224z m0-64a48 48 0 1 0 0-96 48 48 0 0 0 0 96zM864 480a32 32 0 0 1 0-64h96a32 32 0 0 1 0 64h-96zM64 480a32 32 0 0 1 0-64h96a32 32 0 0 1 0 64H64zM480 64a32 32 0 0 1 64 0v96a32 32 0 0 1-64 0V64z"
                              fill="#d81e06"
                              p-id="5598"
                            ></path>
                            <path
                              d="M272.448 800h-64v-288a304 304 0 0 1 608 0v288h-64v-288a240 240 0 0 0-480 0v288z"
                              fill="#d81e06"
                              p-id="5599"
                            ></path>
                          </svg>
                          <div>紧急报警</div>
                        </div>
                      </Col> */}
                      {/* <Col className="flex-center" span={6} onClick={handleEmergentReport}>
                        <div className="iconItem">
                          <svg
                            t="1712300740316"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="4413"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M560.843 942.122H159.301c-52.172 0-94.617-42.445-94.617-94.617V178.913c0-52.172 42.445-94.617 94.617-94.617h540.005c52.172 0 94.617 42.445 94.617 94.617v206.922c0 15.293-12.399 27.693-27.693 27.693-15.293 0-27.693-12.4-27.693-27.693V178.913c0-21.633-17.601-39.231-39.231-39.231H159.301c-21.633 0-39.231 17.599-39.231 39.231v668.593c0 21.633 17.599 39.231 39.231 39.231h401.542c15.293 0 27.693 12.397 27.693 27.693-0.001 15.293-12.4 27.692-27.693 27.692z"
                              fill="#d81e06"
                              p-id="4414"
                            ></path>
                            <path
                              d="M544.844 450.517H199.917c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h344.928c3.3 0 6 2.7 6 6v43.385c-0.001 3.3-2.701 6-6.001 6zM627.923 302.053H199.917c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h428.006c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6zM461.766 598.98h-261.85c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h261.85c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6zM403.304 747.444h-191.08c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h191.08c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6z"
                              fill="#d81e06"
                              p-id="4415"
                            ></path>
                            <path
                              d="M942.051 539.537c-34.757-64.824-86.298-71.37-86.298-71.37-66.011-13.428-105.151 36.924-117.721 56.701-12.571-19.777-51.71-70.129-117.723-56.701 0 0-51.54 6.546-86.297 71.37-17.456 32.557-22.153 71.642-11.897 107.677 4.525 15.898 12.09 31.846 24.612 43.842a128.128 128.128 0 0 1 4.119 4.155l187.186 196.486 187.185-196.486a129.157 129.157 0 0 1 4.119-4.155c12.522-11.996 20.087-27.944 24.612-43.842 10.256-36.035 5.559-75.12-11.897-107.677z m-120.19 160.408h-64.5v70.526c0 11.625-8.698 21.136-19.33 21.136s-19.33-9.511-19.33-21.136v-70.526h-64.5c-10.631 0-19.329-9.511-19.329-21.135 0-11.625 8.698-21.136 19.329-21.136h64.5v-70.525c0-11.625 8.698-21.136 19.33-21.136s19.33 9.511 19.33 21.136v70.525h64.5c10.631 0 19.329 9.511 19.329 21.136 0.001 11.624-8.698 21.135-19.329 21.135z"
                              fill="#d81e06"
                              p-id="4416"
                            ></path>
                          </svg>
                          <div>紧急报病</div>
                        </div>
                      </Col> */}
                      <Col className="flex-center" span={8} onClick={() => setMedicineOpen(true)}>
                        <div className="iconItem">
                          <svg
                            t="1712300740316"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="4413"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M560.843 942.122H159.301c-52.172 0-94.617-42.445-94.617-94.617V178.913c0-52.172 42.445-94.617 94.617-94.617h540.005c52.172 0 94.617 42.445 94.617 94.617v206.922c0 15.293-12.399 27.693-27.693 27.693-15.293 0-27.693-12.4-27.693-27.693V178.913c0-21.633-17.601-39.231-39.231-39.231H159.301c-21.633 0-39.231 17.599-39.231 39.231v668.593c0 21.633 17.599 39.231 39.231 39.231h401.542c15.293 0 27.693 12.397 27.693 27.693-0.001 15.293-12.4 27.692-27.693 27.692z"
                              fill="#1296db"
                              p-id="4414"
                            ></path>
                            <path
                              d="M544.844 450.517H199.917c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h344.928c3.3 0 6 2.7 6 6v43.385c-0.001 3.3-2.701 6-6.001 6zM627.923 302.053H199.917c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h428.006c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6zM461.766 598.98h-261.85c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h261.85c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6zM403.304 747.444h-191.08c-3.3 0-6-2.7-6-6v-43.385c0-3.3 2.7-6 6-6h191.08c3.3 0 6 2.7 6 6v43.385c0 3.3-2.7 6-6 6z"
                              fill="#1296db"
                              p-id="4415"
                            ></path>
                            <path
                              d="M942.051 539.537c-34.757-64.824-86.298-71.37-86.298-71.37-66.011-13.428-105.151 36.924-117.721 56.701-12.571-19.777-51.71-70.129-117.723-56.701 0 0-51.54 6.546-86.297 71.37-17.456 32.557-22.153 71.642-11.897 107.677 4.525 15.898 12.09 31.846 24.612 43.842a128.128 128.128 0 0 1 4.119 4.155l187.186 196.486 187.185-196.486a129.157 129.157 0 0 1 4.119-4.155c12.522-11.996 20.087-27.944 24.612-43.842 10.256-36.035 5.559-75.12-11.897-107.677z m-120.19 160.408h-64.5v70.526c0 11.625-8.698 21.136-19.33 21.136s-19.33-9.511-19.33-21.136v-70.526h-64.5c-10.631 0-19.329-9.511-19.329-21.135 0-11.625 8.698-21.136 19.329-21.136h64.5v-70.525c0-11.625 8.698-21.136 19.33-21.136s19.33 9.511 19.33 21.136v70.525h64.5c10.631 0 19.329 9.511 19.329 21.136 0.001 11.624-8.698 21.135-19.329 21.135z"
                              fill="#1296db"
                              p-id="4416"
                            ></path>
                          </svg>
                          <div>在线报病</div>
                        </div>
                      </Col>
                      {/* <Col className="flex-center" span={6} onClick={handleConfirmMedicine}>
                        <div className="iconItem">
                          <svg
                            t="1712301177861"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="6738"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M67.6873 527.090756a313.504859 313.504859 0 0 0-23.983095 34.276963 307.684243 307.684243 0 0 0-21.396154 272.70665v0.053895c2.802519 6.898508 5.874511 13.743122 9.162081 20.479946 2.910308 5.712827 5.928405 11.37176 9.108187 17.030692l3.125886 5.335565a305.366775 305.366775 0 0 0 35.031487 47.103876 316.576851 316.576851 0 0 0 34.115279 32.336757A305.151197 305.151197 0 0 0 305.039096 1023.998922c36.648325 0 73.350544-6.521246 108.112558-19.509843l6.898508-2.748625a315.984011 315.984011 0 0 0 27.055087-12.55744 292.108705 292.108705 0 0 0 49.421344-32.390652c8.515346-6.844614 16.65343-14.120384 24.306462-21.827311l210.673972-210.620077 203.61378-203.61378c118.729793-118.729793 118.729793-312.965913 0-431.695706A304.558356 304.558356 0 0 0 719.219059 0.001617a304.881724 304.881724 0 0 0-215.847853 89.033871L89.083454 503.32324a380.172473 380.172473 0 0 0-11.425654 12.072389c-2.856414 3.28757-5.712827 6.575141-8.407557 9.916605a24.737619 24.737619 0 0 0-1.562943 1.778522m518.466004-355.27317a186.529193 186.529193 0 0 1 133.11965-54.756909 186.852561 186.852561 0 0 1 187.768769 187.822664c0 50.55313-19.455949 97.764795-54.703014 133.11965l-203.721569 203.559885-266.077616-266.023721 203.667675-203.721569"
                              fill="#1296db"
                              p-id="6739"
                            ></path>
                          </svg>
                          <div>服药确认</div>
                        </div>
                      </Col> */}
                      <Col className="flex-center" span={8}>
                        <div className="iconItem">
                          <svg
                            t="1712303588425"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="7880"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M511.034511 132.881426c85.158519 71.912843 211.894991 155.165965 317.351811 189.163267l0 75.074859c-5.618974 198.600197-145.651264 407.207305-317.351811 497.987868-171.702594-90.781586-311.737954-299.387671-317.368184-497.987868l0-75.074859C299.136449 288.048415 425.873945 204.794269 511.034511 132.881426M511.008928 61.321624c-8.833179 0-17.664312 3.236718-24.642237 9.735735-88.019683 82.098833-193.45399 142.368498-308.032562 176.141696-23.585161 6.950296-39.857776 28.955472-39.857776 53.970192l0 97.130178c6.473435 245.14528 151.727657 464.266859 372.558158 562.04786 220.828454-97.781 366.082676-316.903603 372.555088-562.04786l0-97.130178c0-25.040303-16.259312-46.99636-39.870056-53.970192-114.568339-33.772174-219.978087-94.018304-307.99777-176.116113C528.724405 64.582901 519.866666 61.321624 511.008928 61.321624L511.008928 61.321624zM384.132262 487.85509c-28.932959-19.747763-45.925982-29.393447-75.319429-41.333384l15.156188-34.903951c28.474518 11.022031 56.949037 23.422456 81.749886 36.282345L384.132262 487.85509zM360.709807 696.822402c-16.074094-13.319353-29.851888-22.50455-45.467541-32.149211 11.94096-21.585621 23.422456-48.223305 36.282345-81.749886 9.644661-24.799826 15.156188-43.171242 19.289322-69.808926 10.562567 9.18622 22.50455 15.156188 37.20025 20.667715C374.947066 631.147634 364.84294 667.429978 360.709807 696.822402zM400.206356 384.980072c-16.074094-22.045085-40.874943-44.548612-62.001099-58.785871l26.178219-29.851888c26.178219 18.829857 44.548612 33.526581 67.511603 54.652737L400.206356 384.980072zM578.401828 465.811028c62.001099 0 102.875019-1.378393 137.320529-4.592598l0 41.793872c-35.82288-3.216251-78.994122-4.592598-145.587819-4.592598-67.971068 0-110.223381 1.37737-146.505725 4.592598l0-41.793872c30.770817 2.75474 65.215304 4.133134 116.194372 4.592598l0-82.20935c-37.659715 0.459464-66.134233 1.836835-88.63776 4.592598l0-40.415478c22.503527 2.755764 50.978045 4.134157 88.63776 4.592598 0-42.252313-2.296299-63.837934-4.592598-75.319429 13.319353 1.836835 32.607652 3.215228 48.682769 2.755764 11.94096 0 11.481496 3.215228 3.673669 9.644661-5.511527 4.592598-9.185196 15.615653-9.185196 25.718755l0 37.201274c48.681746 0 84.96409-1.378393 110.682845-4.592598l0 40.415478c-25.718755-3.215228-62.001099-4.592598-110.682845-4.592598L578.401828 465.811028zM585.750189 566.850236l32.607652-16.991999c26.637684 34.444487 58.326407 80.371492 82.208327 118.031207l-41.334407 23.88192c-5.969968-13.319353-12.399401-25.718755-18.828834-36.740786l-124.920104 17.452487c-32.149211 4.592598-49.601698 8.725732-63.379493 14.6957-3.674693-12.399401-11.022031-27.096125-18.370393-39.037085 23.422456-12.399401 50.51858-47.304376 96.90505-146.966213 11.022031 7.348362 25.718755 15.615653 38.119179 21.12718 11.022031 5.052063 11.022031 8.267291 0.917906 11.481496-7.807826 2.296299-14.696724 10.104125-82.20935 105.631806 43.171242-2.296299 92.312452-7.348362 136.402623-14.237259C611.468944 603.591021 598.610078 583.842235 585.750189 566.850236z"
                              fill="#272636"
                              p-id="7881"
                            ></path>
                          </svg>
                          <div>法律援助</div>
                        </div>
                      </Col>
                      <Col className="flex-center" span={8}>
                        <div className="iconItem">
                          <svg
                            t="1712303738609"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="12204"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M531.5 820.5c-6.5 0-12.8-2.9-17-8l-71.1-86.4V783c0 12.1-9.8 22-22 22s-22-9.9-22-22V664.7c0-9.3 5.8-17.6 14.6-20.7 8.7-3.1 18.5-0.5 24.4 6.7l86.4 105 204.4-517.1-520.7 205.8L321.2 557l205.7-146.7c9.9-7 23.6-4.8 30.7 5.1 7 9.9 4.7 23.6-5.1 30.7L331.6 603.7c-8.7 6.3-20.7 5.2-28.3-2.4L153.7 451.8c-5.2-5.2-7.5-12.8-6-20 1.5-7.3 6.6-13.3 13.5-16L760.3 179c8.1-3.2 17.4-1.3 23.6 4.9 6.2 6.2 8.1 15.5 4.9 23.6L551.9 806.6c-2.9 7.2-9.3 12.4-17 13.6-1.1 0.2-2.3 0.3-3.4 0.3z"
                              fill="#040000"
                              p-id="12205"
                            ></path>
                          </svg>
                          <div>反映监室动态</div>
                        </div>
                      </Col>
                      <Col className="flex-center" span={8}>
                        <div className="iconItem">
                          <svg
                            t="1712303702028"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="10987"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M890.01984 357.60128c0-61.62432-50.13504-111.7696-111.7696-111.7696h-68.25984v-23.06048c0-113.36704-92.23168-205.59872-205.59872-205.59872s-205.59872 92.23168-205.59872 205.59872v23.06048h-68.23936c-61.62432 0-111.75936 50.13504-111.74912 110.9504l-21.7088 548.5056c0 61.62432 50.13504 111.75936 111.7696 111.75936H799.9488c61.62432 0 111.75936-50.13504 111.73888-112.56832l-21.66784-546.87744zM339.75296 222.78144c0-90.78784 73.85088-164.63872 164.63872-164.63872s164.63872 73.85088 164.63872 164.63872v23.06048H339.75296v-23.06048zM799.9488 976.09728H208.86528c-39.03488 0-70.8096-31.76448-70.81984-69.9904l21.7088-548.5056c0-39.03488 31.76448-70.8096 70.79936-70.8096H778.24c39.03488 0 70.8096 31.76448 70.83008 71.61856l21.66784 546.88768a70.8608 70.8608 0 0 1-70.78912 70.79936z"
                              fill="#13227a"
                              p-id="10988"
                            ></path>
                            <path
                              d="M504.39168 701.94176c-96.36864 0-174.76608-78.39744-174.76608-174.76608h-40.96c0 118.94784 96.77824 215.72608 215.72608 215.72608 118.95808 0 215.72608-96.77824 215.72608-215.72608h-40.96c0 96.36864-78.39744 174.76608-174.76608 174.76608z"
                              fill="#13227a"
                              p-id="10989"
                            ></path>
                          </svg>
                          <div>自助购物</div>
                        </div>
                      </Col>

                      <Col className="flex-center" span={8}>
                        <div className="iconItem">
                          <svg
                            t="1712303882465"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13400"
                            width="140"
                            height="140"
                          >
                            <path
                              d="M213.333333 213.333333h597.333334v597.333334H213.333333V213.333333z m85.333334 85.333334v426.666666h426.666666V298.666667H298.666667z m136.533333 243.2l21.333333 55.466666V349.866667l213.333334-21.333334 25.6 55.466667-179.2 17.066667v38.4h179.2v59.733333H640V554.666667l59.733333 17.066666v59.733334l-59.733333-12.8v68.266666h-64V597.333333l-38.4-12.8v-59.733333l38.4 12.8v-38.4h-55.466667v192l-64-21.333333V597.333333l-42.666666 93.866667H354.133333v-187.733333h-29.866666v-59.733334h89.6v119.466667l21.333333-21.333333z m-42.666667-221.866667l46.933334 72.533333L384 426.666667 341.333333 349.866667l51.2-29.866667z"
                              fill="#d81e06"
                              p-id="13401"
                            ></path>
                          </svg>
                          <div>投诉反馈</div>
                        </div>
                      </Col>
                    </Row>
                  }
                />
              }
            ></BlueCard>
          </Col>
        </Row>
      )}

      {/* <Row wrap={false} gutter={20}>
        <Col>
          <BlueCard
            title="报警"
            content={
              <>
                {!isCameraing && (
                  <div className={styles.warnBtn} onClick={handleEmergentReport}>
                    <img src={warnImg} className={styles.warnImageF}></img>
                    紧急报警
                  </div>
                )}
              </>
            }
          ></BlueCard>
        </Col>
        <Col>
          <BlueCard
            title="报病"
            content={
              <>
                {!isCameraing && (
                  <div className={styles.warnBtn} onClick={handleEmergentReport}>
                    <img src={warnImg} className={styles.warnImageF}></img>
                    紧急报病
                  </div>
                )}
              </>
            }
          ></BlueCard>
        </Col>
      </Row>

      <div className="p20 w100">
        <BlueCard
          title="其他功能"
          content={
            <div>
              <Button
                onClick={handleNormalReport}
                type="primary"
                size="large"
                style={{ width: '300px', height: '60px', fontSize: 30 }}
              >
                在线报病
              </Button>
            </div>
          }
        ></BlueCard>
      </div> */}
    </div>
  );
};
